﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉菜单</title>
    <script type="text/javascript">
        // 为各个菜单项定义鼠标事件
        startList = function (){
            if(document.all && document.getElementById){
                navRoot = document.getElementById("mynav"); // 找到菜单根目录
                for(i = 0;i<navRoot.childNodes.length;i++){
                    node = navRoot.childNodes[i];
                    if(node.nodeName =="LI"){
                        node.onmouseover = function (){
                            this.className += " over";
                        }
                        node.onmouseout = function (){
                            this.className = this.className.replace(" over","");
                        }
                    }
                }
            }
        }
        window.onload = startList;
    </script>

    <style type="text/css">
        body
        {  font: normal 11px verdana;  }
        ul {
            margin: 0;
            padding: 0;
            list-style: none;
            width: 150px;
            border-bottom: 1px solid #ccc;
        }
        ul li
        {  position: relative;  }
        li ul {
            position: absolute;
            left: 149px;
            top: 0;
            display: none;
        }

        /* 菜单项的样式 */
        ul li a {
            display: block;
            text-decoration: none;
            color: #777;
            background: #fff;
            padding: 5px;
            border: 1px solid #ccc;
            border-bottom: 0;
        }
        * html ul li { float: left; height: 1%; }
        * html ul li a { height: 1%; }
        li:hover ul, li.over ul { display: block; }
    </style>
</head>
<body>
<ul id="mynav">
    <li><a href="#">首页</a></li>
    <li><a href="#">帮助</a>
        <ul>
            <li><a href="#">历史</a></li>
            <li><a href="#">团队</a></li>
            <li><a href="#">办公室</a></li>
        </ul>
    </li>
    <li><a href="#">客服</a>
        <ul>
            <li><a href="http://www.google.com">网页设计</a></li>
            <li><a href="#">网络销售</a></li>
            <li><a href="#">站点服务</a></li>
            <li><a href="#">区域服务</a></li>
        </ul>
    </li>
    <li><a href="#">联系方式</a>
        <ul>
            <li><a href="#">国家</a></li>
            <li><a href="#">城市</a></li>
            <li><a href="#">地址</a></li>
            <li><a href="#">电话</a></li>
        </ul>
    </li>
</ul>
</body>
</html>